<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body  style="height: 100%" id="body">
        <header class="bg">雀实省钱</header>
        <section>
            <!-- 基本概况 -->
            <div class="content basic-box">
                <div class="canvas-head">基本概括
                    <text class="canvas-head-text">（数据更新截止至上一日24：00）</text>
                </div>
                <div class="canvas-data">
                    <div class="canvas-data-msg">
                        <div>兑换金额(元)</div>
                        <div id='basic1'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>兑换次数(次)</div>
                        <div id='basic2'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>人均兑换金额(元)</div>
                        <div id='basic3'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>激活卡数(张)</div>
                        <div id='basic4'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>激活金额(元)</div>
                        <div id='basic5'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div onclick="model(1,'money')"><div>会员总余额(元)</div> <img src="image/question.png" alt=""></div>
                        <div id='basic6'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>生成卡数(张)</div>
                        <div id='basic7'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>生成金额(元)</div>
                        <div id='basic8'>0</div>
                    </div>
                    <div class="canvas-data-msg">
                        <div>注册会员数(个)</div>
                        <div id='basic9'>0</div>
                    </div>
                    <!-- <div class="canvas-data-msg">
                        <div onclick="model(1,'login')"><div>用户激活率</div> <img src="image/question.png" alt=""></div>
                        <div id='basic10'>0%</div>
                    </div> -->
                </div>
            </div>
            <!-- 激活信息，兑换金额 -->
            <div class="content">
                <div class="activating-tab">
                    <div class="activating-tab-box">
                        <div class="active">激活卡数</div>
                        <div>激活金额</div>
                        <div>兑换金额</div>
                    </div>
                    <div class="activating-tab-swiper"><div></div></div>
                </div> 
                <div class="time-tab">
                    <div class="time-tab-change">
                        <div class="active">昨日</div>
                        <div>近7日</div>
                        <div>近30日</div>
                        <div>月</div>
                    </div>
                    <div class="time-tab-time" id='timeTabTime'>
                        <!-- 昨日 <text>（20190506）</text> -->
                    </div>
                    <div class="time-tab-extent" id='timeTabExtent'>
                        <!-- <text>1600 </text> 张 
                        <text>上一日 1500 </text>
                        <text class="red">↑ 10%</text> -->
                    </div>
                </div>
                <div class="">
                    <div id="main" style="width: 100%;height:300px;"></div>
                    <div id="main1" style="width: 100% !important;height:300px;"></div>
                </div>
            </div>
            <!-- 生成卡各面值金额占比分析 -->
            <div class="content">
                <div class="canvas-head">生成卡各面值金额占比分析
                    <text class="canvas-head-text">（单位：张）</text>
                </div>
                <div class="pie-two-box">
                    <div>
                        <h2>普通卡</h2>
                        <div>总计：<i id='normalCardSum'></i> </div>
                        <div>
                            <div id="pie1" style="width: 80%;height:200px;margin: 0 auto;"></div>
                        </div>
                    </div>
                    <div>
                        <h2>定制卡</h2>
                        <div>总计：<i id='customCardSum'></i> </div>
                        <div>
                            <div id="pie2" style="width: 80%;height:200px;;margin: 0 auto;"></div>
                        </div>
                    </div>
                </div>
                <div class="card-msg">
                    <div class="card-msg-color" id='cardMsgColor'>
                        <!-- <div><div style="background: #FF9945"></div>200元</div>
                        <div><div style="background: #4CDFC2"></div>500元</div>
                        <div><div style="background: #5EB0EF"></div>1000元</div>
                        <div><div style="background: #F9CF2B"></div>2000元</div> -->
                    </div>
                </div>
            </div>
            <!-- 定制卡排行榜 -->
            <div class="content" style="padding-bottom:20px">
                <div class="canvas-head">定制卡排行榜
                    <text class="canvas-head-text" id='canvasHeadtext'>（单位：元）</text>
                    <div class="rank-tab dzcard-tab">
                        <div class="active">金额</div>
                        <div>数量</div>
                    </div>
                </div>
                <div class="ranking" id='ranking'>
                    <div>
                        <div>排名</div>
                        <div>公司名称</div>   
                        <div class="ranking-tab-dz active">生成金额 <i></i></div>
                        <div class="ranking-tab-dz">激活金额 <i></i></div>
                        <div class="ranking-tab-dz">兑换金额 <i></i> </div>
                    </div>
                    
                </div>
            </div>
            <!-- 各平台优惠券兑换情况分析 -->
            <div class="content">
                <div class="canvas-head">各平台优惠券兑换情况分析
                    <text class="canvas-head-text" id='canvasHeadText'>（单位：元）</text>
                    <div class="rank-tab dhcoupon-tab">
                        <div class="active">金额</div>
                        <div>次数</div>
                    </div>
                </div>
                <div class="sum-box">总计：<text id='textSum'></text> </div>
                <div>
                    <div id="pie3" style="width: 100%;height:200px;margin: 0 auto;"></div>
                </div>
            </div>
            <!-- 优惠券兑换频次人数分布情况分析 -->
            <div class="content">
                <div class="canvas-head">优惠券兑换频次人数分布情况分析
                    <text class="canvas-head-text">（单位：人）</text>
                </div>
                <div>
                    <div id="zhu4" style="width: 100%;height:200px;margin: 0 auto;"></div>
                </div>
            </div>
            <!-- 优惠券兑换次数商品排行榜 -->
            <div class="content" style="padding-right: 20px;">
                <div class="canvas-head">优惠券兑换次数商品排行榜
                    <text class="canvas-head-text">（单位：次）</text>
                </div>
                <div class="product-ranking" id='productRanking'>
                    <!-- <div>
                        <div>排行</div>
                        <div>商品名称</div>
                        <div>兑换次数</div>
                    </div>
                    <div>
                        <div>1</div>
                        <div>
                            <img src="" alt="">
                            商品名称1
                        </div>
                        <div>100</div>
                    </div> -->
                </div>
            </div>  
        </section>
        <!-- 弹出model -->
        <div class="model" id='model'>
            <div>
                <h1 onclick="model(0)">说明<img src="image/close.png" alt=""></h1>
                <p id="p1"></p>
                <button onclick="model(0)">我知道了</button>
            </div>
        </div>
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/index.js"></script>
    </body>
</html> 
  